
<template>
<div id="viewuser">   
  
      <el-table
    :data="pagination.list"
     :cell-style="rowstyle"
    border
    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"
    style="width: 950px;margin-left:190px;">
   
    <el-table-column
      prop="storeyname"
      label="楼栋名称"
      width="120"
       
      >
     
    </el-table-column>
    <el-table-column
      prop="roomname"
      label="宿舍号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="remainingwater"
      label="剩余金额"
      width="120">
      
    </el-table-column>
 
     <el-table-column
      prop="waterstatus"
      label="状态"
      width="120">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="410"
     align="center">
      <template slot-scope="scope">
         <el-button type="primary"   @click="handleselect(scope.row)">查看充水情况</el-button>
        <el-button type="success" @click="waterDetailselect(scope.row)"  >查看充值记录</el-button>
          <el-button type="info"  @click="topwater(scope.row)" >充值水费</el-button>
      </template>
    </el-table-column>
  </el-table>
   <!--分页-->
     <el-pagination
      style="margin-left:190px;margin-top:20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[1,2,3,4,5,6,7]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>


<el-dialog title="充值记录" :visible.sync="selectWaterDetail">
  <el-table :data="WaterDetail.list"     :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"  :cell-style="rowstyle">
    <el-table-column property="roomname" label="宿舍名称" width="150"></el-table-column>
     <el-table-column property="rechargeamount" label="充值金额" width="200"></el-table-column>
    <el-table-column property="rechargename" label="充值人" width="200"></el-table-column>
    <el-table-column property="rechargedate" label="充值日期"></el-table-column>
    <el-table-column property="payeeman" label="收款单位" width="200"></el-table-column>
   
  </el-table>
   <el-pagination
      style="margin-left:190px;margin-top:20px;"
      @size-change="handleSizeChangewater"
      @current-change="handleCurrentChangewater"
      :current-page="WaterDetail.current"
      :page-sizes="[1,2,3,4,5,6,7]"
      :page-size="WaterDetail.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="WaterDetail.total">
    </el-pagination>
</el-dialog>



<!--水费充值弹框-->
     <el-dialog title="水费充值" :visible.sync="open1" >
        <div style="height:650px;position:relative;">
                    <div style="border:3px solid grey;width:440px;position:absolute;">
                    <img src="@/assets/wx.jpg" style="height:600px;">      
                    </div>

                    <div style="position:absolute;left:530px;">

                             <el-form >
                                <el-form-item label="宿舍编号：" >
                                  <el-input  v-model="roomid"  autocomplete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-form>
                            <el-form >
                                <el-form-item label="充值金额：" >
                                  <el-input v-model="paynum" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>

                             <el-form >
                                <el-form-item label="支付人：" >
                                  <el-input v-model="payName" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>

                            <div slot="footer" class="dialog-footer">
                            <el-button @click="open1 = false">取 消</el-button>
                            <el-button type="primary" @click="pay">确定充值</el-button>
                            </div>
                    </div>
      </div>
    </el-dialog>




</div>
</template>
<script>
   export default {
    data() {
      return {
      
        pagination:{},
        selectWaterDetail:false,
        WaterDetail:{},
        roomid:'',
        open1:false,
         paynum:'',
        payName:'',

      }
    },
    methods: {
   rowstyle(){
       return "text-align: center" ;
       },

//   点击充值水费===========================================================
      topwater(row){
       this.open1=true;
       this.roomid=row.roomid;
      },


      pay(){
        //开始充值操作
            var url="/Waterdetails/pay" ;
          var params=new URLSearchParams();
          params.append("waterdetailsroomdid",this.roomid);
          params.append("rechargename",this.payName);
          params.append("rechargeamount",this.paynum);
           
           
          this.$axios.post(url,params).then(resp=>{
          console.log(resp);
                  this.open1 =  false;
                  this.find();
                 this.payName ='';
                 this.paynum ='';

                  
                        this.$message({message:'充值成功。'
                                                ,duration:5000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'success'});
               
              
          })
      },


 //   进入页面时===========================================================================
     find(page=1,size=6){
       var url="/Water/select" ;
          var params=new URLSearchParams();
           params.append("current",page);
            params.append("size",size);
           
           
          this.$axios.post(url,params).then(resp=>{
             
               this.pagination=resp.data;
               console.log(resp);
          })
    },
  
  //===========================================================================

//   点击查看充值记录时===========================================================================

   
             
      handleSizeChange(row){
          this.waterDetailselect(row)

      },
    
     handleCurrentChange(row){
        this.waterDetailselect(row)
      },
     
      
      waterDetailselect(row,page=1,size=6){
      
         var url="/Waterdetails/select" ;
         this.roomid  = row.roomid;
          var params=new URLSearchParams();
             
          params.append("roomid",this.roomid);  
            params.append("current",page);
            params.append("size",size);
          
          this.$axios.post(url,params).then(resp=>{
             
               this.WaterDetail=resp.data;
                 this.selectWaterDetail=true;
              
          })
      },

 // ===========================================================================


 //   对弹出框进行 修改时 ===========================================================================
         
   


        waterDetailselect2(roomid,page=1,size=6){
        
         var url="/Waterdetails/select" ;
        
          var params=new URLSearchParams();
             
          params.append("roomid",roomid);  
           params.append("current",page);
            params.append("size",size);
          
          this.$axios.post(url,params).then(resp=>{
             
               this.WaterDetail=resp.data;
                 this.selectWaterDetail=true;
              
          })

      },

           handleSizeChangewater(size){
          this.waterDetailselect2(this.roomid, this.WaterDetail.current,size)

      },
     
      handleCurrentChangewater(page){
        this.waterDetailselect2(this.roomid,page,this.WaterDetail.size)
      },

   
// =============================================================================================================================        
     
    },
     mounted() {
        this.find();
     },
    
    
  };
  
</script>

<style scoped>
  #viewuser{
    margin-left: 50px;
    margin-top: 50px;
  }
</style>


